<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>6IN1医院后台管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">


    <script src="/layui/layui.js" charset="utf-8"></script>
    <script src="/echarts/dist/echarts.min.js"></script>
    <script src="/util/request.js"></script>
    <script src="/jquery/jquery-3.6.0.js"></script>

    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/echarts/shine.js"></script>
    <style>
        /* 移动端 */
        @media screen and (max-width: 768px) {
            .layui-layout-admin .layui-layout-left,
            .layui-layout-admin .layui-body,
            .layui-layout-admin .layui-footer {
                left: 0;
            }

            .layui-layout-admin .layui-side {
                left: -300px;
            }
        }

        .info-container {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
        }

        .info-box-1 {
            background: lightskyblue;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
            flex: 1;
            margin: 0 10px;
            color: white;
        }

        .info-box-2 {
            background: darkseagreen;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
            flex: 1;
            margin: 0 10px;
            color: white;
        }

        .info-box-3 {
            background: plum;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
            flex: 1;
            margin: 0 10px;
            color: white;
        }

        .info-box-4 {
            background: indianred;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
            flex: 1;
            margin: 0 10px;
            color: white;
        }

        /* 添加必要的样式 */
        .module {
            width: 15%; /* 减小模块的宽度 */
            padding: 8px;
            float: left;
            text-align: center;
            margin-left: 20px;
        }

        .module-icon {
            width: 60px; /* 图标的大小 */
            height: 60px; /* 图标的大小 */
            margin: 0 auto; /* 使图标居中显示 */
        }

        .module-icon img {
            width: 100%; /* 使图片填充整个图标 */
            height: auto; /* 保持图片的原始高度 */
        }

        .module-label {
            margin-top: 10px; /* 标签与图标之间的间距 */
        }

        .chart-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .chart-box {
            width: 50%;
            height: 400px;
            margin: 20px 0;
        }

        .chart-box1 {

            width: 80%;
            height: 600px;
            margin: 20px 0;
        }

        .custom-icon-1 {
            font-size: 35px;
            color: #34a3ff;
        }

        .custom-icon-2 {
            color: #4c7700; /* 设置图标颜色 */
            font-size: 35px; /* 放大图标 */
        }

        .custom-icon-3 {
            color: #863986FF; /* 设置图标颜色 */
            font-size: 35px; /* 放大图标 */
        }

        .custom-icon-4 {
            color: #ffc9c9; /* 设置图标颜色 */
            font-size: 35px; /* 放大图标 */
        }

        .info-box i1 {
            color: #4a90e2; /* 设置图标颜色 */
            font-size: 35px; /* 放大图标 */
            margin-right: 15px; /* 图片和文本之间的间距 */
        }

    </style>
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">SixInOne医院管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs"><a href="exceptionLog.html">系统异常日志</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="apiLog.html">第三方服务日志</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="banIP.html">封禁IP列表</a></li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="" id="img_top"
                         tppabs="http://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img">
                    <span id="username_top"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" id="myInfo">个人信息</a></dd>
                    <!--                    <dd><a href="javascript:;" id="edit">设置</a></dd>-->
                    <dd><a href="javascript:;" id="logout">退出</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;"><i class="layui-icon layui-icon-console"></i> <span
                            class="nav-text">系统管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="/page/index.html"><i class="layui-icon layui-icon-chart"></i> <span
                                class="nav-text">数据可视化展示</span></a></dd>
                        <dd><a href="/page/user.html"><i class="layui-icon layui-icon-user"></i> <span
                                class="nav-text">管理员列表</span></a>
                        </dd>
                        <dd><a href="/page/exceptionLog.html"><i class="layui-icon layui-icon-log"></i> <span
                                class="nav-text">系统日志管理</span></a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;"><i class="layui-icon layui-icon-group"></i> <span
                            class="nav-text">病人和病房管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="/page/patient.html"><i class="layui-icon layui-icon-user"></i> <span
                                class="nav-text">病人列表</span></a></dd>
                        <dd><a href="/page/room.html"><i class="layui-icon layui-icon-home"></i> <span
                                class="nav-text">病房列表</span></a>
                        </dd>
                        <dd><a href="/page/bed.html"><i class="layui-icon layui-icon-component"></i> <span
                                class="nav-text">病床列表</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;"><i class="layui-icon layui-icon-user"></i> <span
                            class="nav-text">员工和部门管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="/page/employee.html"><i class="layui-icon layui-icon-username"></i> <span
                                class="nav-text">员工列表</span></a></dd>
                        <dd><a href="/page/department.html"><i class="layui-icon layui-icon-tree"></i> <span
                                class="nav-text">部门列表</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;"><i class="layui-icon layui-icon-form"></i> <span
                            class="nav-text">药品和仪器管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="/page/drug.html"><i class="layui-icon layui-icon-template"></i> <span
                                class="nav-text">药品列表</span></a></dd>
                        <dd><a href="/page/instrument.html"><i class="layui-icon layui-icon-survey"></i> <span
                                class="nav-text">仪器列表</span></a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>首页</legend>
        </fieldset>

        <!-- 信息展示 -->
        <div class="info-container">
            <div class="info-box-1">
                <i class="layui-icon layui-icon-username custom-icon-1"></i>
                <h2>病人总计</h2>
                <p id="total-people" style="font-size: 24px;"></p>
            </div>
            <div class="info-box-2">
                <i class="layui-icon layui-icon-tabs custom-icon-2"></i>
                <h2>病床总计</h2>
                <p id="total-registered" style="font-size: 24px;"></p>
            </div>
            <div class="info-box-3">
                <i class="layui-icon layui-icon-list custom-icon-3"></i>
                <h2>病床剩余</h2>
                <p id="total-room" style="font-size: 24px;"></p>
            </div>
            <div class="info-box-4">
                <i class="layui-icon layui-icon-face-smile custom-icon-4"></i>
                <h2>在职医生</h2>
                <p id="total-doctor" style="font-size: 24px;"></p>
            </div>


            <!--                <div class="container">-->
            <!--                    <div class="module">-->
            <!--                        <div class="module-icon">-->
            <!--                            <img src="img1.png" alt="患者登记">-->
            <!--                        </div>-->
            <!--                        <div class="module-label">患者登记</div>-->
            <!--                    </div>-->
            <!--                    <div class="module">-->
            <!--                        <div class="module-icon">-->
            <!--                            <img src="img2.png" alt="预约管理">-->
            <!--                        </div>-->
            <!--                        <div class="module-label">病床管理</div>-->
            <!--                    </div>-->
            <!--                    <div class="module">-->
            <!--                        <div class="module-icon">-->
            <!--                            <img src="img3.png" alt="会员管理">-->
            <!--                        </div>-->
            <!--                        <div class="module-label">药品管理</div>-->
            <!--                    </div>-->
            <!--                    <div class="module">-->
            <!--                        <div class="module-icon">-->
            <!--                            <img src="img4.png" alt="欠费管理">-->
            <!--                        </div>-->
            <!--                        <div class="module-label">仪器管理</div>-->
            <!--                    </div>-->
            <!--                </div>-->

        </div>
        <!--按钮-->

        <!-- 图表展示 -->
        <div class="chart-container">

            <div class="chart-box" id="line-chart"></div>
            <div class="chart-box" id="pie-chart"></div>
            <div class="chart-box1" id="main"></div>
        </div>

    </div>
</div>

<div class="layui-footer">
    <!-- 底部固定区域 -->
    ©CopyRight 2020-2024 数据可视化组
</div>

<script type="text/html" id="face_register_form">
    <div class="getface" style="position: absolute">
        <video id="video" width="600px" height="600px" autoplay="autoplay"></video>
        <canvas id="canvas" width="600px" height="600px" style="display: none;"></canvas>
    </div>
</script>
<script>
    // 使用 ECharts 初始化图表
    var lineChart = echarts.init(document.getElementById('line-chart'), 'shine');
    var pieChart = echarts.init(document.getElementById('pie-chart'), 'shine');
    // var myChart = echarts.init(document.getElementById('main'), 'shine');

    var days = [];
    var counts = [];
    var colorPalette = [
        '#c12e34', '#e6b600', '#0098d9', '#2b821d',
        '#005eaa', '#339ca8', '#cda819', '#32a487'
    ];

    // 折线图配置
    // 定义图表的基本配置
    var lineOption = {
        color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452'],
        title: {
            text: '每日就诊人数统计图',
            left: 'center',
            bottom: 0
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
                interval: 0 // 设置为0意味着显示所有标签
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '就诊人数(折线)',
                data: [],
                type: 'line',
                smooth: true,
                symbol: 'none',
                // 为折线图系列设置颜色
                itemStyle: {
                    color: '#5470C6'
                }
            },
            {
                name: '就诊人数(柱状)',
                type: 'bar',
                barWidth: '60%',
                // 为柱状图系列设置颜色
                itemStyle: {
                    color: function (params) {
                        // 根据数据索引或其他逻辑生成颜色
                        var colors = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452'];
                        return colors[params.dataIndex % colors.length];
                    }
                },
                label: {
                    show: true, // 显示label
                    position: 'top', // 数值显示在柱子顶部
                    formatter: '{c}', // 显示数值，{c}代表当前柱子的值
                }
            }
        ]
    };


    getData('/index/getLineChartData', {}, true).then(res => {
        // 使用新获取的数据更新lineOption
        lineOption.xAxis.data = res.days;
        lineOption.series[0].data = res.counts;
        lineOption.series[1].data = res.counts;


        // 设置更新后的选项
        lineChart.setOption(lineOption);


    })


    // 饼状图配置
    var pieOption = {
        color: colorPalette,
        title: {
            text: '各科室患者人数及比例',
            left: 'center',
            fontSize: '40',
            bottom: 0
        },
        series: [{
            type: 'pie',
            radius: '55%',
            data: [],
            label: {
                show: true,
                position: 'outside', // 标签显示在切片外部
                formatter: '{b}: {c} ({d}%)', // 自定义标签格式
                // 配置连线样式
                lineStyle: {
                    length: 10, // 连线从切片延伸出的长度
                    length2: 10, // 连线到达标签前的长度
                    width: 1, // 连线宽度
                    type: 'solid' // 连线类型
                }
            }
        }]
    };

    // ... 数据加载和设置选项的代码 ...

    getData('/index/getPieChartData', {}, true).then(res => {
        pieOption.series[0].data = res.data.map(department => ({
            value: department.value,
            name: department.name
        }));


        pieChart.setOption(pieOption); // 在数据加载完成后设置选项
    }).catch(error => {
        console.error('Error fetching pie chart data:', error);
    });


</script>


<script>
    // 初始化 ECharts 实例
    var app = {};
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    // 生成时间轴
    const categories = (function () {
        let now = new Date();
        let res = [];
        let len = 10;
        while (len--) {
            res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
            now = new Date(+now - 2000);
        }
        return res;
    })();

    // 生成第二组分类数据
    const categories2 = (function () {
        let res = [];
        let len = 10;
        while (len--) {
            res.push(10 - len - 1);
        }
        return res;
    })();

    // 生成数据
    const data = (function () {
        let res = [];
        let len = 10;
        while (len--) {
            res.push(Math.round(Math.random() * (1000 - 800) + 800));
        }
        return res;
    })();

    // 生成第二组数据
    const data2 = (function () {
        let res = [];
        let len = 0;
        while (len < 10) {
            res.push(+(Math.random() * 10 + 5).toFixed(0));
            len++;
        }
        return res;
    })();

    // 图表配置
    option = {
        title: {
            text: '住院数据'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#283b56'
                }
            }
        },
        legend: {},
        toolbox: {
            show: true,
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data: categories
            },
            {
                type: 'category',
                boundaryGap: true,
                data: categories2
            }
        ],
        yAxis: [
            {
                type: 'value',
                scale: true,
                name: 'Price',
                max: 30,
                min: 0,
                boundaryGap: [0.2, 0.2]
            },
            {
                type: 'value',
                scale: true,
                name: 'Order',
                max: 1200,
                min: 0,
                boundaryGap: [0.2, 0.2]
            }
        ],
        series: [
            {
                name: '住院人数',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: data
            },
            {
                name: '现有病房数',
                type: 'line',
                data: data2
            }
        ]
    };

    // 定时更新数据
    app.count = 11;
    setInterval(function () {
        let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
        data.shift(); // 移除数组中的第一个元素
        data.push(Math.round(Math.random() * (1000 - 800) + 800)); // 添加新数据
        data2.shift(); // 移除数组中的第一个元素
        data2.push(+(Math.random() * 10 + 5).toFixed(0)); // 添加新数据
        categories.shift(); // 移除数组中的第一个元素
        categories.push(axisData); // 添加新的时间戳
        categories2.shift(); // 移除数组中的第一个元素
        categories2.push(app.count++); // 添加新的分类数据
        myChart.setOption({
            xAxis: [
                {
                    data: categories
                },
                {
                    data: categories2
                }
            ],
            series: [
                {
                    name: '住院人数',
                    type: 'bar',
                    data: data,
                    // 设置柱状图颜色
                    itemStyle: {
                        color: function (params) {
                            // 根据数据索引或其他逻辑生成颜色
                            var colors = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452'];
                            return colors[params.dataIndex % colors.length];
                        }
                    }
                },
                {
                    name: '现有病房数',
                    type: 'line',
                    data: data2,
                    // 设置折线图颜色
                    lineStyle: {
                        color: '#FAC858' // 选择你喜欢的颜色
                    },
                    symbol: 'circle', // 折线图的点的形状
                    symbolSize: 5, // 折线图的点的大小
                    itemStyle: {
                        color: '#FAC858' // 点的颜色
                    }
                }
            ]
        });
    }, 6000);

    // 设置图表初始配置
    option && myChart.setOption(option);

</script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
        });
    });
</script>
<script>
    document.querySelectorAll('.module').forEach(module => {
        module.addEventListener('click', () => {
            // 显示更多详细信息或执行特定操作
            console.log('点击了模块：' + module.querySelector('.module-label').textContent);
        });
    });
    var admin = localStorage.getItem("admin")
    admin = JSON.parse(admin)


    if (!admin) {
        window.location.href = '/page/login.html';
    }

    layui.use(['upload', 'element', 'layer'], function () {

        layer = layui.layer;


        // 页面加载完成后执行
        $(document).ready(function () {
            checkFaceRegistration();
        });

        function checkFaceRegistration() {

            if (admin.faceRegister === 0 || admin.faceRegister === null || admin.faceRegister === undefined) {
                // 如果没有注册人脸，弹出注册模态框
                showFaceRegisterModal();
            }
        }

        function showFaceRegisterModal() {
            layer.open({
                type: 1,
                title: '人脸注册',
                closeBtn: false,
                area: ['600px', '600px'],
                shade: 0.8,
                id: 'LAY_layuipro_face', //设定一个id，防止重复弹出
                btn: ['注册', '取消'],
                btnAlign: 'c',
                moveType: 1, //拖拽模式，0或者1
                content: $('#face_register_form').html(), // 引入自定义表单
                btn1: function (index, layero) {
                    // 注册按钮点击事件
                    var imgSrc = captureFaceImage();
                    if (!imgSrc) {
                        layer.msg('请拍摄人脸照片');
                        return false;
                    }

                    let data = {"imageBase64": imgSrc};

                    postData("/user/registerFace", data, true).then(res => {
                        if (res.code === 200) {
                            layer.msg("人脸注册成功!");
                            layer.close(index);
                            window.location.href = '/page/login.html';
                        }
                    });
                },
                success: function (layero) {
                    startVideo();
                }
            });
        }

        function startVideo() {
            var video = document.getElementById('video');
            navigator.mediaDevices.getUserMedia({video: true})
                .then(function (stream) {
                    video.srcObject = stream;
                    video.play();
                })
                .catch(function (err) {
                    console.log("An error occurred: " + err);
                });
        }

        function captureFaceImage() {
            var canvas = document.getElementById('canvas');
            var video = document.getElementById('video');
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            return canvas.toDataURL('image/png');
        }
    });
    $("#username_top").text(admin.username)
    $("#img_top").attr("src", admin.avatar);

    $("#logout").click(function () {
        postData('/user/logout', {}, true).then(resp => {
            if (resp.code === 200) {
                localStorage.removeItem("admin");
                sessionStorage.removeItem("token");

                window.location.replace('/page/login.html');

            }
        })
    })
    $("#edit").click(function () {
        alert("录入人脸")
    })


    $("#myInfo").click(function () {
        var admin = localStorage.getItem("admin");
        admin = JSON.parse(admin);
        if (admin) {
            var avatar = admin.avatar;
            var username = admin.username;
            var userRole = admin.userRole;
            var email = admin.email;

        }
        var htmlContent = `
                <div class="info-container layui-card">
                    <div class="layui-card-header"><h2>我的信息</h2></div>
                    <div class="layui-card-body">
                        <img src="${avatar}" class="layui-img-circle" />
                        <p><strong>姓名：</strong>${username}</p>
                        <p><strong>邮箱：</strong>${email}</p>
                        <p><strong>账户权限：</strong>${userRole}</p>
                    </div>
                </div>
            `;


        // 使用layer.open展示HTML内容
        layer.open({
            type: 1,
            title: false, // 不显示默认的标题
            content: htmlContent,
            area: ['400px', '400px'], // 控制弹出层的大小
            shade: 0.8, // 半透明遮罩
            shadeClose: true, // 点击遮罩关闭
            offset: 'auto', // 弹出层居中
            anim: 2, // 弹出动画
            closeBtn: 1 // 关闭按钮样式
        });
    })


    $(document).ready(function () {
        function fetchData() {


            getData('/index/dashboard', {}, true).then(res => {
                if (res.code === 200) {
                    var data = res.data;
                    $('#total-people').text(data.totalPatient);
                    $('#total-registered').text(data.totalBed);
                    $('#total-room').text(data.totalFreeBed);
                    $('#total-doctor').text(data.totalDoctor);
                }

            }).catch(err => {
                console.error(err);
            });

        }

        fetchData();
    });
</script>
</body>
</html>